<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DivCenter Experiment</title>
</head>
 
<style>
body, html
{
 width: 100%;
 height: 100%;
 margin: 0px; 
 padding: 0px;
 background-color: #FFFFFF;
}
 
.favBgStyle
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
 z-index: 0;
}
 
.favAreaBg
{
 border: 0px;
 padding: 0px;
 position: fixed;
 background-color: #FFFFFF;
 z-index: 1;
}
 
.occupySpace
{
 height: 1500px;
}
</style>
 
<script>
function OffWindowH()
{
 var OffWindowH=0;
 
 window.scrollTo(0,10000000);
 
 if(typeof self.pageYOffset!='undefined')
 OffWindowH=self.pageYOffset;
 else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowH=document.documentElement.scrollTop;
 else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowH=document.body.scrollTop;
 
 window.scrollTo(0,0);
 
 return OffWindowH;
}
 
function WindowHeight() 
{
  var WindowHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) 
  WindowHeight = window.innerHeight;
  else if (document.documentElement &&  document.documentElement.clientHeight) 
  WindowHeight = document.documentElement.clientHeight;
  else if(document.body && document.body.clientHeight) 
  WindowHeight = document.body.clientHeight;
 
  return WindowHeight;
}
 
function pHeight()
{
  var pHeight = OffWindowH() + WindowHeight();
  return pHeight;
}
 
function favBg()
{
  var favBg = document.getElementById('favBg');
  favBg.style.height = pHeight() + 'px';
}
 
function favArea() 
{
 var Element = document.getElementById("favArea");
 objh = parseFloat(Element.style.height)/2;
 objw = parseFloat(Element.style.width)/2;
 Element.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
 Element.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}
</script>
 
<body onload="favBg();" onclick=" favArea();">
<script>
 
</script>

<div id="favBg" class="favBgStyle"></div>
<div class="occupySpace"></div>
<table>
	<tr>
		<td><div id="favArea" class="favAreaBg"  style="width: 500px; height: 400px;">test1</div></td>
		<td></td>
		<td></td>
	</tr>
</table>

</body>
</html>